﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Floor Plan Monitor</title>
  <meta name="description" content="TypeScript: A read-only viewer of floor plans created by the Floor Plan Editor." />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Copyright 1998-2019 by Northwoods Software Corporation. -->

  <style type="text/css">
    h1 {
      text-align: center;
      font-size: x-large;
      font-family: "Arial";
      color: #00CDCD;
    }

    #info {
      text-align: center;
      font-family: "Arial";
      color: #008080;
    }

    .openText {
      font-size: 16px;
      font-weight: bold;
      font-family: "Arial";
      color: #008080;
    }

    #open {
      -moz-box-shadow: inset 0px 1px 0px 0px #caefab;
      -webkit-box-shadow: inset 0px 1px 0px 0px #caefab;
      box-shadow: inset 0px 1px 0px 0px #caefab;
      background-color: #FFEC8B;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      border: 3px solid #a8a8a8;
      color: #3b3b3b;
      font-weight: bold;
      font-size: large;
      text-align: center;
      width: 75px;
      height: 50px;
      margin-left: 30px;
    }

      #open:hover {
        background-color: #FFFF2A;
      }
  </style>
  <script src="../samples/assets/require.js"></script>
  <script>
    function init() {
      require(["FloorPlanMonitorScript"], function(app) {
        app.init();
        document.getElementById("open").onclick = app.load;
      });
    }
  </script>
</head>
<body onload="init()">
  <div id="sample">
    <h1>Floor Plan Monitor</h1>
    <p id="info">Open a floor plan made in the "Floor Plan Editor" and watch simulated alerts decorate the screen.</p>
    <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
    <div>
      <table border="0">
        <tr>
          <td>
            <p class="openText">Choose a floor plan:</p>
          </td>
          <td></td>
          <td>
            <p class="openText">Overview:</p>
          </td>
        </tr>
          <tr>
            <td>
              <select id="file list" name="File List" multiple="multiple" style="font-family:Arial; font-size:medium; width:300px; height:200px; margin-left: 50px"></select>
            </td>
            <td>
              <button id="open" type="button">Open</button>
            </td>
            <td>
              <div id="myOverviewDiv" style="border:solid 1px black; width: 300px; height:200px; margin-left: 50px"></div>
            </td>
          </tr>
      </table>
    </div>
  </div>
</body>
</html>
